<script setup>
import { onMounted, ref } from 'vue'
import { getSystemAuthoritiesApi, getUserAuthoritiesApi, logout } from '@/apis/user'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { useUserStore } from '@/store/index.js'

import YuButton from '@/components/button/yuButton.vue'

const userStore = useUserStore()
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
// 权限映射后用户能访问的系统权限
const userAuthorities = ref()

// 已完成开发的系统
const canRouteURIs = [
  {authCode: '15OJgY4R', uri: '/system/department'},
  {authCode: '2mITujUd', uri: '/system/recruitment/resume'},
  {authCode: 'weuJtRS8', uri: '/system/userinfo/userinfos'},
  {authCode: 'YgPKo3PP', uri: '/system/taskManagement'},
  {authCode: 'S09xMDeX', uri: '/system/authManagement'},
  {authCode: 'Pm2VsqqP', uri: '/system/fileManagement'},
  {authCode: 'MEfzMHkj', uri: '/system/projectManagement'},
]

// 跳转到指定系统
const gotoSystem = authCode => {
  const uri = canRouteURIs.filter(uri => uri.authCode == authCode)
  if (uri.length == 0) {
    ElMessage({type: 'info', message: '持续开发中，敬请期待。'})
    return
  }
  console.log(uri)
  router.push(uri[0].uri)
}

// 退出
const exit = () => {
  logout().then(res => {
    if (res.code == 200) {
      ElMessage({type: 'success', message: '登出成功，期待下一次与你相见！'})
      userStore.clearUserInfo()
      router.push('/login')
    }
  })
}

// 获取用户所有权限
const getUserAuthorities = async () => {
  const {data: userAuthorityList} = await getUserAuthoritiesApi()
  const {data: systemAuthorities} = await getSystemAuthoritiesApi()
  // 当匿名访问时
  if (userAuthorityList == 'ROLE_ANONYMOUS') {
    router.push('/login')
  }
  const userAuthoritySet = new Set(userAuthorityList)
  userAuthorities.value = systemAuthorities.filter(item => userAuthoritySet.has(item.authCode))
}


onMounted(() => {
  if (userInfo.value) {
    getUserAuthorities()
    return
  }
  router.push('/login')
})
</script>
<template>
  <el-container>
    <el-aside width="60%">
      <img src="http://jczm.wentexl.cn/files/1716988258943logo_s2.PNG" alt="">
      <!--      <div class="system-name">-->
      <!--        <el-row>-->
      <!--          <el-col :span="24">&ensp;</el-col>-->
      <!--        </el-row>-->
      <!--        <el-row>-->
      <!--          <el-col :span="24">&ensp;</el-col>-->
      <!--        </el-row>-->
      <!--      </div>-->
      <div class="user-info-container" v-if="userInfo">
        <el-row>
          <el-col :span="24" class="username"> — {{ userInfo.username }} —</el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="name">{{ userInfo.name }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <yu-button class="logout-button" @click="exit">退出</yu-button>
          </el-col>
        </el-row>
      </div>
    </el-aside>
    <el-main>
      <div class="navs-container">
        <yu-button
            class="nav-button"
            v-for="userAuthority in userAuthorities"
            :index="userAuthority.authCode"
            @click="gotoSystem(userAuthority.authCode)"
        >{{ userAuthority.authName }}
        </yu-button>
      </div>
    </el-main>
  </el-container>
</template>

<style lang="less" scoped>
.el-container {
  height: 100%;
  background-image: linear-gradient(30deg, #29323c 0%, #485563 81%);

  .el-aside {
    //position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    img {
      width: 600px;
      margin: 120px 0 100px;
      //height: 600px;
      //position: absolute;
      //top: 140px;
      //right: 210px;
      //border-radius: 50%;
    }

    //padding-top: 10%;
    //background: url('../../assets/imgs/bg.png') no-repeat;
    //background-position: center -25px;
    .system-name {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: justify;
      font-size: 170px;
      font-weight: bold;
      letter-spacing: 12px;
      color: #ffffff;
    }

    .user-info-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #ffffff;
    }

    .logout-button {
      padding: 6px 30px;
      margin-top: 12px;
      font-size: 20px;
      font-weight: bold;
    }
  }

  .el-main {
    display: flex;
    align-items: center;

    .navs-container {
      display: grid;
      grid-template-columns: 300px 300px;
      grid-template-rows: 74px 74px;
      grid-column-gap: 52px;
      grid-row-gap: 48px;
      margin-bottom: 20%;

      .nav-button {
        height: 80px;
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>
